<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script>
export default{
  name:"home",
  methods:{
    drawChart(){
      let echart = this.$echarts.init(document.getElementById("container"));

      let option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: 'one hammer',
                fontSize: 80,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: 'rgb(114,207,194)',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 4000,
                loop: false,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: 'rgb(114,207,194)'
                    }
                  }
                ]
              }
            }
          ]
        }
      };
      echart.setOption(option);
    },
  },
  mounted() {
    this.drawChart()
  }
}
</script>
<style scoped="scoped">

#container{
  width: 500px;
  height: 200px;
  position: relative;
  margin-left: 350px;
  margin-top: -350px;
}
</style>